<template>
  <div class="window loginbg">
    <div class="absolute t20 l20 f20 fw flex-sc">
      <img class="mr10" src="@/assets/images/logo.png" />
      <span class="i1">四川省电力公司智能安全预警系统{{publicStore.stationNum}}</span>
    </div>
    <div class="absolute-cc tt95 f12 i1">四川省电力公司智能安全预警系统版权所有©2023</div>
    <el-form class="loginStyle absolute-cc ll82 rr30 bgi14 ww22 rad5 plr40 pb40 pt35" ref="formRef" :model="state.form" label-width="0px" size="large" status-icon>
      <el-form-item>
        <div class="flex-sc ww100 f26">账号登录</div>
      </el-form-item>
      <el-form-item prop="username" label="" :rules="[{required: true, message: '用户名称必须', trigger: 'blur'}]">
        <el-input v-model="state.form.username" placeholder="请输入用户名称" autocomplete="off"/>
      </el-form-item>
      <el-form-item prop="password" label="" :rules="[{required: true, message: '用户密码必须', trigger: 'blur'}]">
        <el-input v-model="state.form.password" placeholder="请输入用户密码" type="password" show-password @keyup.enter.native="submitForm"/>
      </el-form-item>
      <el-button class="active ww100 mt30" @click="submitForm()" :loading="state.loading">{{state.loading? '登录中' : '登 录'}}</el-button>
    </el-form>
  </div>

</template>

<script lang="ts" setup>
  import CryptoJS from 'crypto-js'
  const { proxy }:any = getCurrentInstance()
  const publicStore = proxy.publicStore()
	const configStore = proxy.configStore()
  const state = reactive({
	  ...publicStore.$state,
  })
  const formRef = $ref(null)
  // 登录
  const submitForm = () => {
    formRef.validate(async(valid) => {
      if(!valid) return false
      state.loading = true
      // let query = {"o":"o_comm_usr","i":2,"p":[form.username, CryptoJS.MD5([form.password].toString().trim()).toString().toUpperCase()]}
      // let res = await store.dispatch('D', {_user: query})
      // loading = false
      // if(proxy.isNull(res)) return ElNotification({ title: '提示', message: '登录失败', type: 'error' })
      // ElNotification({ title: '提示', message: '登录成功', type: 'success' })
      // store.commit('M', {_token: new Date().getTime()})
      // setTimeout(() => {proxy.toPath('/admin')}, 800);
    })
  }
</script>

<style lang="scss">
  .loginStyle .el-input__wrapper{
    width: 100%;
    box-sizing: border-box;
    padding: 5px 15px;
  }
  .loginStyle .el-input__inner{
    font-size: 18px !important;
  }
  .loginStyle .el-button{
    box-sizing: border-box;
    padding: 26px !important;
    font-size: 18px !important;
  }
</style>
